Secure Payment Links are designed to be embedded within an iframe hosted on a trusted domain. These links are not accessible directly in a browser tab and are ideal for use cases where users need a secure and contained environment, such as saving payment methods.
✅ How Secure Payment Links Work
When secure payment links are enabled:
-
Two URLs are returned:
- An open link: usable in standard browsers.
- A secure link: intended for embedding within an iframe.
-
The domain hosting the iframe must match one of the trusted domains configured in your business profile’s
allowed_domains list.
🔧 Step 1: Configure allowed_domains in Business Profile
To enable secure payment links, first set up the list of trusted domains (e.g., localhost:5500):
curl --location '{{BASE_URL}}/account/{{MERCHANT_ID}}/business_profile/{{PROFILE_ID}}' \
--header 'Content-Type: application/json' \
--header 'api-key: {{ADMIN_API_KEY}}' \
--data '{
"payment_link_config": {
"allowed_domains": [
"localhost:5500"
]
}
}'
🧾 Step 2: Create a Payment Link
Once the trusted domains are configured, create a payment link using the standard Payments Create API. This response will include both open and secure versions of the link.
curl --location '{{BASE_URL}}/payments' \
--header 'Content-Type: application/json' \
--header 'api-key: {{API_KEY}}' \
--data '{
"amount": 100,
"currency": "USD",
"payment_link": true,
"profile_id": "pro_YXlbYtgiANENrZgxdL8Q"
}'
Sample Response:
{
...
"payment_link": {
"link": "http://localhost:8080/payment_link/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en",
"secure_link": "http://localhost:8080/payment_link/s/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en",
"payment_link_id": "plink_lF9deXMRrdIEs1drMVhF"
},
...
}
🖼️ Step 3: Embed Secure Link in an iframe
To display the secure link within your app or website, embed it in an <iframe> like so:
<html>
<head>
<style>
html,
body {
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: bisque;
}
iframe {
border-radius: 4px;
height: 80vh;
width: 80vw;
}
</style>
</head>
<body>
<iframe
src="http://localhost:8080/payment_link/s/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en"
frameborder="0"
></iframe>
</body>
</html>
Make sure the domain embedding the iframe matches one of the entries in the allowed_domains list. Otherwise, the secure link will not load.